<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>jPlayers</title>
    <link type="text/css" rel="stylesheet" href="static/jquery-ui-1.11.1/jquery-ui.min.css"/>
    <script type="text/javascript" src="static/jquery-ui-1.11.1/external/jquery/jquery.js"></script>
    <script type="text/javascript" src="static/jquery-ui-1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="static/jQuery.jPlayer.2.7.0/jquery.jplayer.min.js"></script>
    <script type="text/javascript">
        $(function () {
//            $("#audio").jPlayer({
//                ready: function () {
//                    $(this).jPlayer("setMedia", {
//                        mp3: ""
//                    });
//                },
//                swfPath: "static/jPlayer-master/jquery.jplayer",
//                supplied: "mp3"
//            });

            $("#video").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        title: "TOKYO",
                        m4v: "static/videos/tokyo.m4v",
                        ogv: "static/videos/tokyo.ogv",
                        poster: "static/videos/poster.jpg"
                    });
                },
                swfPath: "static/jQuery.jPlayer.2.7.0",
                supplied: "m4v, ogv",
                cssSelectorAncestor: "#video-control-bar",
                cssSelector: {
                    play:".play",
                    pause:".pause",
                    stop:".stop"
                }
            });
        });
    </script>
</head>
<body>
<h1>jPlayers</h1>

<div id="audio"></div>
<div id="video"></div>
<div id="video-control-bar">
    <a class="play" href="javascript:void(0)">Play</a>
    <a class="pause" href="javascript:void(0)">Pause</a>
    <a class="stop" href="javascript:void(0)">Stop</a>
</div>
</body>
</html>